<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/vue.js"></script>
</head>
<script>
    Vue.component('todoItem',{
        props: ['todo'],
        template:'<li>{{todo.text}}</li>'
    });
    Vue.component('user-list',{
        props:['user'],
        template:'<tr><td>用户名</td><td>{{user.userName}}</td><td>性别</td><td>{{user.sex}}</td><td>{{user.families}}</td><td>{{user.families.name}}</td></tr>'
    })
</script>
<body>
    <div id="app-1">
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
        </ol>
        <table>
            <td>
                <th>用户名</th>
                <th>性别</th>
            </td>
            <user-list v-for="item in users" v-bind:user="item"></user-list>
        </table>
    </div>

</body>
<script type="text/javascript">
    var app1 =new Vue({
        el:'#app-1',
        data:{
            message:'hello vue',
            groceryList:[{
                text:'蔬菜'
            },{
                text:'奶酪'
            },{
                text:'苹果'
            }],
            users:[
                {
                userName:'陈',
                sex:'男',
                families:{
                    name:'张女儿',
                    relation:'孙女'
                }
            },{
                userName:'陈',
                sex:'女',
                families:{
                    name:'张女儿',
                    relation:'孙女'
                }
            },{
                userName:'张三',
                sex:'女',
                families:{
                    name:'张女儿',
                    relation:'孙女'
                }
            }]
        }
    });
</script>
</html>